import ExternalClassesReminder from '@site/fragments/ExternalClassesReminder.mdx'

# mpx (原生增强)

<ExternalClassesReminder framework="mpx" />

在 `vue.config.js` 中注册：

```js title="vue.config.js"
const { defineConfig } = require('@vue/cli-service')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')

module.exports = defineConfig({
  // other options
  configureWebpack(config) {
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        rem2rpx: true,
      })
    )
  }
})

```

## 引入 Tailwind CSS 样式

Tailwind 的底层样式需要显式导入。不同主版本的包结构略有差异：

### Tailwind CSS v3.x

仍然可以直接引用 Tailwind 提供的底层样式文件（带 `.css` 扩展名）：

```html title="src/app.mpx"
<style lang="scss">
  @import 'tailwindcss/base.css';
  @import 'tailwindcss/components.css';
  @import 'tailwindcss/utilities.css';
</style>
```

### Tailwind CSS v4.x

v4 官方改用了全新的 CSS 包结构，推荐直接引入 `weapp-tailwindcss` 提供的聚合样式文件：

```html title="src/app.mpx"
<style lang="scss">
  @import 'weapp-tailwindcss/index.css';
</style>
```

这样即可获得预置的 base / components / utilities，同时避免 `postcss-import` 误解析到 JS 入口导致构建报错。

## mpx 中的 vscode tailwindcss 智能提示缺失设置

我们知道 `tailwindcss` 最佳实践，是要结合 `vscode`/`webstorm`提示插件一起使用的。

假如你遇到了，在 `vscode` 的 `mpx` 文件中，编写 `class` 没有出智能提示的情况，可以参考以下步骤。

这里我们以 `vscode` 为例:

接着找到 `Tailwind CSS IntelliSense` 的 `扩展设置`

在 `include languages`,手动标记 `mpx` 的类型为 `html`

![如图所示](./img/vscode-tailwindcss.png)

保存设置，再去`mpx`文件里写`class`的时候，智能提示就出来啦。
